<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册页面</title>
	<style type="text/css">
	.register{
	margin-left: 20%;
	margin-top: 5%;
	width: 800px;
	height: 1200px;
	background: #ffffff;
	background: rgba(255,255,255,.9);
	opacity: 0.9;
	/*-moz-opacity: .9;
	-webkit-opacity: .9;
	filter: alpha(opacity=90);*/
	box-shadow: 0 0 30px black;
	border-radius: 10px;
	/*background:lightblue;*/
	}
	.title{
	text-align:center;
	background: gray;
	/*background: #4c5e47;*/
	width: 800px;
	height: 60px;
	line-height: 60px;
	border-bottom: 1px solid #cccccc;
	position: relative;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	font-size: 36px
	}
	.logo{
	float: left;
	margin-left: 30px;
	margin-top: 10px;
	/*font-size: 16px;
	color: green;*/
	position: relative;
	}
	.register input,.register select{

	display: block;
	float: left;
	width: 340px;
	height: 35px;
	line-height: 35px;
	margin: 8px;
	text-indent: 20px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	color:#020202;
	font-size: 14px;
	margin-top: 22px;
	margin-left: 20%;
	}
	.register span{
	display: block;
	float: left;
	height: 35px;
	line-height: 35px;
	margin: 8px;
	text-indent: 20px;
	font-size: 14px;
	margin-top: 22px;
	margin-left: 5%;

	}
	.btn{
	border-radius: 5px;
	background: gray;/*蓝黑#4c5e47*/
	border: none;
	color: white;
	font-size: 16px;
	text-align: center;
	}
	.rl{
	float: left;
    width: 600px;
    height: 20px;
    color:#4c5e47;
    text-align:center;
	}
	.content{
	background-image:url("/static/images/bkground/2.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	}
	</style>

<script type="text/javascript">
	window.onload=function(){

			//1.【验证密码的安全等级以及一致性】
			var passTxt=document.querySelector("[name=psw1]")
			var repass=document.getElementById('psw2')
			var isSubmit=false
			var isSubmit2=false
			var isSubmit1=false
			//给密码绑定失去焦点事件
			passTxt.onblur=function(e){
				var verfiypass=document.getElementById('verfiypass')
				isSubmit=true
				if(this.value==''){
					verfiypass.innerHTML="当前密码为空"
					verfiypass.style.color='red'
					//密码为空不能提交
					isSubmit=false

				}else if(this.value.length<=3){
					verfiypass.innerHTML="当前密码等级为：弱"
					verfiypass.style.color='red'
				}else if(this.value.length<=6){
					verfiypass.innerHTML="当前密码等级为：中"
					verfiypass.style.color='orange'
				}else{
					verfiypass.innerHTML="当前密码等级为：强"
					verfiypass.style.color='green'
				}
			}
			//验证两次密码是否一致
			repass.onblur=function(e)
			{//获取密码提示语
				if(repass.value==passTxt.value&&repass.value!='')
				{
					//两次密码一致
					verfiyrepass.innerHTML="√"
					verfiyrepass.style.color='green'
					isSubmit=true
				}else{
					//两次密码不一致
					verfiyrepass.innerHTML="密码为空或两次密码不一致"
					verfiyrepass.style.color='red'
					isSubmit=false
					//不允许提交
				}
			}

//2.【验证用户名是否可用】
		var userTxt=document.querySelector('[name=username]')
		var name=document.getElementById('name')
		userTxt.onblur=function(e){
			//需要发出一个异步请求，去查询用户名是否可用
			//构建ajax参数
			isSubmit1=false
			var data="username="+userTxt.value
			if(userTxt.value!='')
			{
				var xhr=new XMLHttpRequest()
				xhr.onreadystatechange=function(event){	
					if(xhr.readyState==4)
					{
						if(xhr.status==200)
						{
							if(xhr.responseText){	
								isSubmit1=false
								name.innerHTML="用户名已存在"
								name.style.color='red'
							}else{
								isSubmit1=true
								name.innerHTML="用户名可用"
								name.style.color='green'
							}
						}
					}
				}
			xhr.open("post","checkUsername",true)
			xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')//固定写成这样
			xhr.send(data)
			}
		}

			document.querySelector('[type=submit]').onclick=function(e){
					if(isSubmit&&isSubmit1&&isSubmit2)
					{
						
					}
					else{
						e.preventDefault()
					}
				}

// 3.判断年龄是否为数字
		var isage=document.querySelector("[name=age]")	
		
		isage.onblur=function(e){
				var verfiyage=document.getElementById('verfiyage')
				if(this.value==""){
					verfiyage.innerHTML="请输入数字"
					verfiyage.style.color='red'
					isSubmit2=false

				}
				else
				{
					verfiyage.innerHTML=""
					isSubmit2=true
				}				
		}
	}
</script>

</head>
<body class="content">

	<div class="register">
    	<div class="title">
             <!--  <p>欢 迎 注 册</p> -->
    	</div>
     <form  id="" action="register" method="post" name="form1" class="FRL">

               <input  placeholder="请输入用户名" name="username" type="text" id="username"><span id="name"></span>

               <input  placeholder="请输入密码" name="psw1" type="password" id="psw1"><span id="verfiypass"></span>
               <input  placeholder="请确认密码" name="psw2" type="password" id="psw2" ><span id="verfiyrepass"></span><br><br>
               <input  placeholder="请输入昵称" name="nickname" type="text" id="nickname" >

               <select name="identity" onChange="getIdentity()" id="identity">
               	  <option value="-1">请选择身份</option>
                  <option value="0">学生</option>
                  <option value="1">教师</option>
               </select>
               <select name="sex" onChange="getSex()" id="sex">
               	  <option value="">请选择性别</option>
                  <option value="男">男</option>
                  <option value="女">女</option>
               </select>
               <input  placeholder="请输入年龄" name="age" type="text" id="age" onkeyup="value=this.value.replace(/\D+/g,'')" ><span id="verfiyage"></span>
               <input  placeholder="qq或电话或邮箱" name="contact" type="text" id="contact" >
               <input  placeholder="你有哪些爱好？" name="hobby" type="text" id="hobby" >
               <input  placeholder="请输入学历" name="eduBackgroud" type="text" id="eduBackgroud" >
               <input  placeholder="请输入所在学校" name="school" type="text" id="school" >
               <input  placeholder="请输入所在班级" name="grade" type="text" id="grade" >
               <input  placeholder="请输入所获奖项" name="reward" type="text" id="reward" >
               <input  placeholder="请输入英语水平" name="englishLevel" type="text" id="englishLevel" >
               <input  placeholder="请输入居住地址" name="address" type="text" id="address" >
                               
               <!-- input type="text" name="phone" id="phone"  placeholder="联系方式" /> -->
               <input type="submit" name="" id="" value="注册" class="btn" style="color: #ffffff;" /><br>
            <div>
            <a class="rl" href="login.html">已经有账号？去登陆</a>
            </div>
     </form> 
    </div>
</body>
</html>